<template>
  <div class="login">
    <div class="hedaer">
      <img src="./../assets/img/logo.png" alt="" />
    </div>
    <a-form
      layout="horizontal"
      :form="form"
      @submit="handleSubmit"
      class="login-form"
    >
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="Tab 1">
          <a-form-item>
            <a-input
              placeholder="Username 不为空就好"
              size="large"
            >
              <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              type="password"
              placeholder="Password 不为空就好"
              size="large"
            >
              <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
            </a-input-password>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Tab 2" force-render>
          <a-form-item>
            <a-input
              placeholder="mobile phone 不为空就好"
              size="large"
            >
              <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-row :gutter="8">
              <a-col :span="17">
                <a-input placeholder="captcha 不为空就好">
                  <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" />
                </a-input>
              </a-col>
              <a-col :span="7">
                <a-button style="width: 100%">获取验证码</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
      <div style="margin-bottom: 20px">
        <a-checkbox :checked="true" >自动登录</a-checkbox>
        <a style="float: right">忘记密码</a>
      </div>
      <a-form-item style="text-align: center">
        <a-button
          type="primary"
          html-type="submit"
          style="width: 100%"
          size="large"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      // hasErrors,
      form: this.$form.createForm(this),
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.form.validateFields();
    });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.$router.push({ name: "default" });
        }
      });
    },
    callback(key) {
      console.log(key);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  border-bottom: 0px;
  text-align: center;
}
.login {
  .hedaer {
    margin: 100px auto 0px;
    width: 300px;
    text-align: center;
    img {
      width: 100px;
    }
  }
  .login-form {
    width: 400px;
    margin: 60px auto 0px;
  }
}
</style>
